<template>
<div class="container">
  <div class="lists-wrap">
    <router-link class="list flex" 
      v-for="item in productList" 
      :to="{path:'/ProductDetail',query:{productId:item.productId}}"
      :key="item.productId">
      <div class="list-l">
        <img :src="item.logoUrl" alt="">
      </div>
      <div class="list-r flex-1">
        <div class="t" v-text="item.productName"></div>
        <div class="content" v-text="item.summary"></div>
      </div>
    </router-link>

    

  </div>
  <div class="empty" v-if="productList.length==0">
    <img src="../assets/images/ic_info@2x.png" alt="">
    <p>小编正在加紧添加内容~</p>
  </div>
</div>

</template>

<script>
import Api from '@/service';
export default {
  name: 'NewsList',
  data () {
    return {
      productList: []
    }
  },
  methods: {
    initNewsLists(){
      let _self = this;

      Api.sm.initNewsListPage()
      .then(function(response){
        // console.log(response.data.info)
        _self.productList = response.data.info.productList;

      });
    }

  },
  mounted: function(){
    this.initNewsLists();
  }
}
</script>

<style lang="scss" scoped type="text/css">
@import  "../assets/scss/reset";
.container{
  width: 100%;
  height: 100vh;
  background: white;
  overflow: auto;
  box-sizing: border-box;
  .lists-wrap{
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0 calculateRem(16px);
    .list{
      width: 100%;
      height: auto;
      box-sizing: border-box;
      border-bottom: 1px solid #EAEAEA;
      padding: calculateRem(14px) 0;
      &:active{
        background-color: #fbfbfb;
      }
      .list-l{
        width: calculateRem(80px);
        height: calculateRem(80px);
        margin-right: calculateRem(15px);
        overflow: hidden;
        >img{
          width: 100%;
          height: 100%;
        }

      }
      .list-r{
        max-width: 72%;
        .t{
          width: 100%;
          height: calculateRem(22px);
          line-height: calculateRem(22px);
          font-size: calculateRem(16px);
          color: #333;
          font-weight: bold;
          @include ell;

        }
        .content{
          width: 100%;
          height: calculateRem(60px);
          line-height: calculateRem(20px);
          color: #4b4b4b;
          font-size: calculateRem(14px);
          @include break;
          @include mulell(3);
          overflow: hidden;
        }
      }
    }
  }
  .empty{
    width: 100%;
    overflow: hidden;
    text-align: center;
    >img{
      width: calculateRem(60px);
      height: calculateRem(60px);
      margin-top: calculateRem(61px);
    }
    >p{
      font-size: calculateRem(16px);
      color: #999999;
      line-height: calculateRem(24px);
      margin: 0;
      margin-top: calculateRem(14px);
      text-align: center;
    }
  }
}
</style>
